import { View, Text } from "@tarojs/components";
import { observer } from "mobx-react";
import React, { Fragment, useEffect, useState } from "react";
import { XmIcon } from "@/components/ui";
import { userStore } from "@/store";
import { Router } from "@/path/router";
import { XmDateTimePicker, XmToast } from "@/components/public";
import { Input } from '@taroify/core'
import Button from "@taroify/core/button/button";
import { validateUserInfo } from './validate'
import Navbar from "@/components/ui/navbar";
import dayjs from "dayjs";
import { regRecycler } from '@/path/api/user/index'
import Taro from "@tarojs/taro"
import { Checkbox } from "@taroify/core";
import "./index.scss"
function Index() {
  const [userInfos, setUserInfos] = useState({
    username: '',
    birthday: ''
  })
  const [isRead, setIsRead] = useState(false)
  const [loading, setLoading] = useState(false)
  /*
  * 阅读协议跳转 
  */
  const toAgreement = () => {
    if (!userStore.userInfo.agreement) {
      XmToast.open("请先签字")
      return
    }
    // 判断用户信息是否都已填写
    if (validateUserInfo(userInfos)) {
      setLoading(true)
      regRecycler(userInfos).then(() => {
        XmToast.success('申请成功')
        userStore.refreshUserInfo()
        Router.toStatusPage({
          title: '审核状态',
          img: 'reg-success.png',
          text: '申请提交成功，管理员正在审核，请耐心等待',
        })
      }).finally(() => {
        setLoading(false)
      })
    }
  }
  function onShowAgreement(e) {
    e.stopPropagation()
    if (!userStore.userInfo.agreement) {
      Router.toRegAgreement()
    } else {
      Taro.downloadFile({
        url: userStore.userInfo.agreement
      }).then((res) => {
        Taro.openDocument({
          filePath: res.tempFilePath
        })
      })
    }
  }
  function onSign() {
    Router.toRegAgreementSign().then(() => {
      userStore.refreshUserInfo()
    })
  }
  useEffect(() => {
    if (userStore.userInfo.agreement) {
      setIsRead(true)
    }
  }, [userStore.userInfo.agreement])
  useEffect(() => {
    // 获取当前用户登录信息
    userStore.refreshUserInfo()
    setUserInfos({
      username: userStore.userInfo.userName || "",
      birthday: userStore.userInfo.birthday || "",
    });
  }, [])
  return <>
    <View className="mineregister-nav">
      <Navbar showIcon={true} titleClassName="mineregister-nav-title" title={'注册回收员'} />
    </View>
    <View className="mineregister-center bg-white">
      <View className="center-cell border-btm">
        <Text className="c-black f-weight-bold s-sm-2">姓名</Text>
        <View className="cell-right">
          <Input className="t-right cell-ipt s-sm-2" type="text" disabled={userStore.userInfo.isRecycler == 2} value={userInfos.username} onInput={(e) => {
            setUserInfos({
              ...userInfos,
              username: e.detail.value
            });
          }} placeholder="点击填写"></Input>
          <XmIcon className="right-arrow" icon="jinrujiantouxiao"></XmIcon>
        </View>
      </View>
      <View className="center-cell mineregister-tips">
        <Text>注：姓名注册后不可再修改，请认真填写</Text>
      </View>
      <View className="center-cell">
        <Text className="c-black f-weight-bold s-sm-2">生日</Text>
        <View className="cell-right" onClick={() => {
          if (userStore.userInfo.isRecycler == 2) return
          XmDateTimePicker({
            title: "选择生日",
            max: new Date(),
            type: 'date',
          }).then((res) => {
            setUserInfos({
              ...userInfos,
              birthday: dayjs(res.date).format('YYYY-MM-DD')
            });
          })
        }}>
          <Input className="t-right cell-ipt s-sm-2" disabled value={userInfos.birthday} placeholder="选择生日"></Input>
          <XmIcon className="right-arrow" icon="jinrujiantouxiao"></XmIcon>
        </View>
      </View>
      <View className="center-cell mineregister-tips">
        <Text>注：每个账号在注册成功后X天内系统自动赠送X天免费会员体验期，会员体验期内可以正常接单和正式会员享受同等会员权益，用户在体验期结束之后不再继续，需要自行购买正式会员；若体验期结束且尚未开通会员，将不再可以继续接单。</Text>
      </View>

      <View className="center-cell border-btm">
        <Text className="c-black f-weight-bold s-sm-2">合同签署</Text>
        <View className="cell-right" onClick={onSign}>
          <Input className="t-right cell-ipt c-green s-sm-2" readonly value={userStore.userInfo.agreement ? "重新签字" : "签字"}></Input>
          <XmIcon className="right-arrow" icon="jinrujiantouxiao"></XmIcon>
        </View>
      </View>
      <View className="center-cell">
        <Checkbox checked={isRead} onChange={setIsRead} disabled={userStore.userInfo.isRecycler == 2 || userStore.userInfo.isRecycler == 1}>
          <Text className="login-text s-sm-2">阅读并签署</Text>
          <Text className="login-text c-green s-sm-2" onClick={onShowAgreement}>《速应生活回收员注册告知书与承诺书》</Text>
        </Checkbox>
      </View>
    </View>
    {(userStore.userInfo.isRecycler == 3 && userStore.userInfo.noPassReason) ? <View className="mineregister-center bg-white">
      <View className="center-cell">
        <Text className="c-black f-weight-bold s-sm-2">审核不通过原因</Text>
      </View>
      <View className="center-cell mineregister-tips">
        <Text>{userStore.userInfo.noPassReason}</Text>
      </View>
    </View> : null}
    <View className="mineregister-center-submit">
      {userStore.userInfo.isRecycler == 0 ?
        <Button loading={loading} color="primary" disabled={!isRead || !userInfos.username || !userInfos.birthday}
          onClick={toAgreement} shape="round" block>提交</Button> :
        userStore.userInfo.isRecycler == 2 ? <Button loading={loading} color="default" shape="round" block>等待审核</Button> :
          userStore.userInfo.isRecycler == 3 ? <Button loading={loading} color="primary" disabled={!isRead || !userInfos.username || !userInfos.birthday}
            onClick={toAgreement} shape="round" block>重新提交</Button> :
            <Button loading={loading} color="default" shape="round" block>已成为回收员</Button>
      }
    </View>
  </>
}

const Higher = React.memo(observer(Index));
export default () => <Fragment><Higher /></Fragment>
